import React, { Component } from 'react';
import PropTypes from 'prop-types';
import MyECharts from '@components/my-echarts';
import moment from 'moment';
import _ from 'lodash';

const tipUnitMap = {
  'CPU 使用率': '%',
  内存使用率: '%',
  硬盘使用率: '%',
  发送流量: 'kb/s',
  接收流量: 'kb/s'
};
class NodeTrend extends Component {
  constructor(props) {
    super(props);
  }
  getOption = (date, data) => {
    const dateFormat = date.map(item => moment(item).format('HH:mm'));
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        },
        textStyle: {
          color: '#686C78'
        },
        backgroundColor: '#ffffff',
        formatter: params => {
          let tip = '';
          if (params !== null && params.length > 0) {
            tip += params[0].name + '<br />';
            _.forEach(params, item => {
              tip +=
                item.marker +
                item.seriesName +
                ': ' +
                item.value +
                tipUnitMap[item.seriesName] +
                '<br />';
            });
          }
          return tip;
        }
      },
      legend: {
        bottom: 0,
        icon: 'circle'
      },
      grid: {
        top: '8%',
        left: '1%',
        right: '2%',
        bottom: '18%',
        containLabel: true
      },
      dataZoom: {
        type: 'slider',
        bottom: '8%',
        labelFormatter: ''
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: dateFormat
        }
      ],
      yAxis: [
        {
          name: '使用率(%)',
          max: 100,
          type: 'value'
        },
        {
          name: '使用量(kb/s)',
          type: 'value'
        }
      ],
      series: data
    };
    return option;
  };
  getAreaColor = color => {
    return {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: `rgba(${color}, 0.2)`
          },
          {
            offset: 1,
            color: `rgba(${color}, 0)`
          }
        ],
        global: false
      }
    };
  };

  render() {
    const { data = [] } = this.props;
    const date = [];
    const cpuData = [];
    const memoryData = [];
    const diskData = [];
    const netSendData = [];
    const netReciveData = [];
    data.forEach(item => {
      const time = _.get(item, 'created');
      const cpu = _.get(item, 'cpu');
      const memory = _.get(item, 'memory');
      const disk = _.get(item, 'disk');
      const netSend = _.get(item, 'netSend');
      const netRecive = _.get(item, 'netRecive');
      date.push(time);
      cpuData.push(cpu);
      memoryData.push(memory);
      diskData.push(disk);
      netSendData.push(netSend);
      netReciveData.push(netRecive);
    });
    const chartData = [
      {
        name: 'CPU 使用率',
        type: 'line',
        color: '#0B6FD6',
        areaStyle: this.getAreaColor('11, 111, 214'),
        symbol: 'none',
        data: cpuData
      },
      {
        name: '内存使用率',
        type: 'line',
        color: '#F67E23',
        areaStyle: this.getAreaColor('246, 126, 35'),
        symbol: 'none',
        data: memoryData
      },
      {
        name: '硬盘使用率',
        type: 'line',
        color: '#FF0000',
        areaStyle: this.getAreaColor('255, 0, 0'),
        symbol: 'none',
        data: diskData
      },
      {
        name: '发送流量',
        type: 'line',
        color: '#71CCB2',
        areaStyle: this.getAreaColor('113, 204, 178'),
        yAxisIndex: 1,
        symbol: 'none',
        data: netSendData
      },
      {
        name: '接收流量',
        type: 'line',
        color: '#FED831',
        areaStyle: this.getAreaColor('254, 216, 49'),
        yAxisIndex: 1,
        symbol: 'none',
        data: netReciveData
      }
    ];
    return <MyECharts option={this.getOption(date, chartData)} />;
  }
}

NodeTrend.propTypes = {
  data: PropTypes.array
};

export default NodeTrend;
